import React, { useState, useEffect } from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import { Card, Divider, Input, List, Typography } from 'antd'
import moment from 'moment'
import Artyom from "artyom.js"
// const artyom = require("artyom.js");
const artyom = new Artyom();



const TableList = () => {
  const [text, setText] = useState('')
  const [data, setData] = useState([])
  const addLog = (code) => {
    setData(
      () => {
        data.push({ title: code, time: moment().format('YYYY-MM-DD HH:mm:ss') })
        return [...data]
      }
    )
  }
  useEffect(() => {
    let code = ''
    let lastTime, nextTime
    let lastCode, nextCode
    window.addEventListener('keypress', function (e) {
      nextCode = e.which
      nextTime = new Date().getTime()

      if (lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
        code += String.fromCharCode(lastCode)
      } else if (lastCode != null && lastTime != null && nextTime - lastTime > 100) {
        code = ''
      }
      lastCode = nextCode
      lastTime = nextTime
      if (e.which === 13) {
        setText(code)
        //  console.log(code);
        //code = ''
      }
    })
    artyom.on(['你好','早上好']).then((i) => {
      switch (i) {
        case 0:
          artyom.say("Good morning, how are you?");
          break;
        case 1:
          artyom.say("Good afternoon, how are you?");
          break;
      }
    });
    let commandHello = {
      indexes:["你好","早上好","测试"], // These spoken words will trigger the execution of the command
      action:function(){ // Action to be executed when a index match with spoken word
        artyom.say("Hey buddy ! How are you today?");
      }
    };

    artyom.addCommands(commandHello); // Add the command with addCommands method. Now
    artyom.on(['重复我说的*'] , true).then((i,wildcard) => {
      artyom.say("You've said : " + wildcard);
    });
    // Start the commands !
    artyom.initialize({
      lang: "zh-CN", // GreatBritain english
      continuous: true, // Listen forever
      soundex: true,// Use the soundex algorithm to increase accuracy
      debug: false, // Show messages in the console
      executionKeyword: "测试",
      listen: true, // Start to listen commands !
      // If providen, you can only trigger a command if you say its name
      // e.g to trigger Good Morning, you need to say "Jarvis Good Morning"
      name: "你好"
    }).then(() => {
      console.log("Artyom has been succesfully initialized");
    }).catch((err) => {
      console.error("Artyom couldn't be initialized: ", err);
    });

  }, [])
  useEffect(() => {
    addLog(text)
    const option = {
      title: '扫描结果',
    }
    if(text!==''){

    }
    /**
     * To speech text
     */
    artyom.say(`扫描内容${text}`,{
      onStart: () => {
        console.log("Reading ...");
      },
      onEnd: () => {
        //console.log("No more text to talk");
        // Force the language of a single speechSynthesis
      }
    });
  }, [text])
  return (
    <PageContainer>
      <Card>
        <Typography.Text strong>
          扫描结果
        </Typography.Text>
        <Input placeholder="使用扫描枪扫描二维码或条形码可自动打开条码对应的流程" readOnly={true} value={text}/>
      </Card>
      <Divider orientation="left">扫描历史</Divider>
      <List
        size="small"
        bordered
        dataSource={data}
        renderItem={item => (
          <List.Item>
            <List.Item.Meta
              title={item.title}
              description={item.time}
            />
          </List.Item>
        )}
      />
    </PageContainer>
  )
}

export default TableList
